<template>
  <div class="queue-wrap">
    <continer :showPage="showPage" :isNoTabs="true">
      <template slot="content">
        <div class="title">产品表单设置</div>
        <div class="msg-item">
          <div class="mgs-tip">
            <div class="sub-title">产品表单</div>
            <div class="mgs-tip">用于配置新建和编辑时，展示的产品信息及字段</div>
          </div>
          <div>
            <el-button type="primary" size="small" @click.stop="handleConfig('product')">前往配置</el-button>
          </div>
        </div>
        <div class="msg-item">
          <div class="mgs-tip">
            <div class="sub-title">产品品类表单</div>
            <div class="mgs-tip">用于配置新建和编辑时，展示的产品品类信息及字段</div>
          </div>
          <div>
            <el-button type="primary" size="small" @click.stop="handleConfig('category')">前往配置</el-button>
          </div>
        </div>
        <div class="title">二维码设置</div>
        <div class="msg-item">
          <div class="mgs-tip">
            <div class="sub-title">二维码展示产品信息</div>
            <div class="mgs-tip">启用此功能后，扫描二维码会展示其关联产品的相关信息，若未启用，则跳转至用户移动端门户进行登录访问</div>
          </div>
          <div>
            <el-switch v-model="form.gottenStatus" :active-value="1" :inactive-value="0" @change="save"></el-switch>
          </div>
        </div>
      </template>
      <template slot="page">
        <productFormConfig ref="productFormConfigRef" :titleArr="titleArr" @pageBack="pageBack"></productFormConfig>
      </template>
    </continer>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { commonAction } from '@/utils/common';
import productFormConfig from './productFormConfig.vue'
@Component({
  name: 'productConfig',
  components: {
    breadcrumb,
    productFormConfig,
    continer
  }
})
export default class Queue extends Vue {
  [x: string]: any
  private showPage: boolean = false
  @Ref() private readonly productFormConfigRef !: productFormConfig

  private titleArr: any[] = []

  private form = {
    gottenStatus: 0
  }

  private save () {
    console.log('1111')
  }

  private pageBack () {
    this.showPage = false
  }

  private handleConfig (type: any) {
    this.showPage = true
    this.titleArr = ['返回']
    this.$nextTick(() => {
      // this.productFormConfigRef.setData()
    })
  }

  private back () {
    this.$nextTick(() => {
      // this.productFormConfigRef.setQueueData()
      this.showPage = false
    })
  }

  private beforeMount () {
    commonAction({ url: `/server-work/action/message/config/search?modelId=${this.$route.params.businessId}`, method: 'get' }).then(res => {
      if (res.success) {
        console.log(res)
        this.id = res.data.id
        const { gottenStatus } = res.data
        this.form = {
          gottenStatus: gottenStatus || 0
        }
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.queue-wrap
  width 100%
  height 100%
  position relative
.mgs-tip {
  max-width: calc(100vw - 700px);
  word-break: break-word;
}
.msg-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #E7E9ED;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.product-config {
  padding: 24px 24px 0;
  border-radius: 10px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  margin: 0 2px 2px 0;
  border: 1px solid #ecf0f3;
  box-shadow: 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0;
}
.title {
  margin-bottom: 24px
  font-weight: 600;
  color: #303753;
  font-size: 14px
}
.sub-title {
  font-weight: 400;
  color: #303753;
  margin-bottom: 10px
}
.mgs-tip {
  font-weight: 400;
  color: #767E91;
}
>>> .handle-wrapper-header {
  display: none;
}
>>>.handle-wrapper {
  padding: 16px
}
</style>
